<template>
  <div class="container contract-review mb70">
    <p class="bread">
      <a href="#/index/tm-order-list" class="font-s-18">交易监控订单管理-监控师</a> >
      <a href="javascript:void(0);" class="font-s-16">详情</a>
    </p>
    <div class="bg-c-fff box-border">
      <h3 class="tm-title">交易监控订单详情</h3>
      <step :stepData="stepData" :stepNum="stepNum" @stepRouter="stepRouter"></step>
    </div>
    <div class="content bg-c-fff tc">
      <table class="auto" width="700px">
        <tr>
          <td>1.查看待审查合同</td>
          <td>
            <file-num :fileNum="pendingContracts.length"></file-num>
            <button class="blue-button xl-btn-css vb" @click="onCheckPending">查看</button>
          </td>
        </tr>
        <tr>
          <td>2.填写合同审查表</td>
          <td>
            <file-num :fileNum="reviewFormNum"></file-num>
            <div class="dib">
              <button class="blue-button xl-btn-css vb" @click="write" v-if="jurisdicType">填写</button>
              <div class="lt" v-for="(item, index) in list">
                <button class="blue-button xl-btn-css vb" @click="show(index)">合同审查表{{index + 1}}</button>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>3.上传合同审查报告</td>
          <td>
            <file-num :fileNum="contractReports.length"></file-num>
            <div class="dib btn-box" :class="{seeType:!jurisdicType}">
              <button class="blue-button xl-btn-css vb" @click="onCheckContractReport">查看</button>
              <button class="blue-button xl-btn-css vb" @click="showUploadVodal" v-if="jurisdicType">上传</button>
            </div>
          </td>
        </tr>
        <tr>
          <td>4.查看正式合同</td>
          <td>
            <file-num :fileNum="formalNum"></file-num>
            <a class="blue-button xl-btn-css vb" download target="_blank" :href="formalContract" v-show="formalNum">查看</a>
          </td>
        </tr>
      </table>
      <button type="button" class="blue-button xl-btn-css next-step" @click="onNextStep" v-if="jurisdicType">下一步</button>
    </div>
    <vodal :show="showPendingContract" animation="zoom" :width="600" :height="500" @hide="showPendingContract = false">
      <file-browser type="contract" :files="pendingContracts" ref="fileBrowser"></file-browser>
    </vodal>
    <vodal :show="showContractReport" animation="zoom" :width="600" :height="500" @hide="showContractReport = false">
      <file-browser type="contract" :files="contractReports" ref="reportBrowser"></file-browser>
    </vodal>
    <vodal :show="writeShow" animation="zoom" :width="1000" :height="700" @hide="writeShow=false">
      <div class="vodal-main">
        <h4>合同审查表{{index}}</h4>
        <div class="con">
          <table width="100%">
            <tr>
              <th colspan="4">合同审查表</th>
            </tr>
            <tr>
              <td width="100px">序号</td>
              <td width="300px">审查项目</td>
              <td width="500px">具体内容</td>
              <td width="200px">备注</td>
            </tr>
            <tr>
              <td>1</td>
              <td>待审查项目与监控申请单一致性</td>
              <td class="choose-box">
                <input type="radio" name="same" id="same" value="1" v-model="uniformity" :disabled="isDisabled">
                <label for="same">一致</label>
                <br>
                <input type="radio" name="same" id="notsame" value="0" v-model="uniformity" :disabled="isDisabled">
                <label for="notsame">不一致</label>
              </td>
              <td>
                <textarea v-model="uniformityRemarks" placeholder="备注信息" :disabled="isDisabled"></textarea>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>合同合法性</td>
              <td class="choose-box">
                <input type="radio" name="legal" id="legal" value="1" v-model="legitimacy" :disabled="isDisabled">
                <label for="legal">合法</label>
                <br>
                <input type="radio" name="legal" id="notlegal" value="0" v-model="legitimacy" :disabled="isDisabled">
                <label for="notlegal">不合法</label>
              </td>
              <td>
                <textarea v-model="legitimacyRemarks" placeholder="备注信息" :disabled="isDisabled"></textarea>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>主要法律法规、条款</td>
              <td class="choose-box">
                <textarea class="tex-css" placeholder="类型" v-model="type" :disabled="isDisabled"></textarea>
              </td>
              <td>
                <textarea v-model="typeRemarks" placeholder="备注信息" :disabled="isDisabled"></textarea>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>主要条款</td>
              <td class="choose-box">
                <ul>
                  <li>
                    <input type="checkbox" name="" id="theSubject" value="标的" v-model="mainTerms" :disabled="isDisabled">
                    <label for="theSubject">标的</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="price" value="价格" v-model="mainTerms" :disabled="isDisabled">
                    <label for="price">价格</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="payment" value="支付方式" v-model="mainTerms" :disabled="isDisabled">
                    <label for="payment">支付方式</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="transport" value="运输" v-model="mainTerms" :disabled="isDisabled">
                    <label for="transport">运输</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="deliver" value="交付" v-model="mainTerms" :disabled="isDisabled">
                    <label for="deliver">交付</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="ys" value="验收" v-model="mainTerms" :disabled="isDisabled">
                    <label for="ys">验收</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="install" value="安装" v-model="mainTerms" :disabled="isDisabled">
                    <label for="install">安装</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="warranty" value="质保" v-model="mainTerms" :disabled="isDisabled">
                    <label for="warranty">质保</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="breachOfContract" value="违约" v-model="mainTerms" :disabled="isDisabled">
                    <label for="breachOfContract">违约</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="jurisdiction" value="管辖权" v-model="mainTerms" :disabled="isDisabled">
                    <label for="jurisdiction">管辖权</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="notification" value="通知送达" v-model="mainTerms" :disabled="isDisabled">
                    <label for="notification">通知送达</label>
                  </li>
                  <li>
                    <input type="checkbox" name="" id="takeEffect" value="生效" v-model="mainTerms" :disabled="isDisabled">
                    <label for="takeEffect">生效</label>
                  </li>
                </ul>
              </td>
              <td>
                <textarea v-model="mainRemarks" placeholder="备注信息" :disabled="isDisabled"></textarea>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>具体条款</td>
              <td class="choose-box">
                <input type="checkbox" name="" id="qymqx" value="权益明确性" v-model="specificTerms" :disabled="isDisabled">
                <label for="qymqx">权益明确性</label>
                <br>
                <input type="checkbox" name="" id="bsmqx" value="表述确定性" v-model="specificTerms" :disabled="isDisabled">
                <label for="bsmqx">表述精确性</label>
              </td>
              <td>
                <textarea v-model="specificRemarks" placeholder="备注信息" :disabled="isDisabled"></textarea>
              </td>
            </tr>
            <tr>
              <td>6</td>
              <td>资质审查中问题的对策</td>
              <td class="choose-box">
                <input type="radio" name="" id="y" value="1" v-model="countermeasure" :disabled="isDisabled">
                <label for="y">有</label>
                <br>
                <input type="radio" name="" id="w" value="0" v-model="countermeasure" :disabled="isDisabled">
                <label for="w">无</label>
              </td>
              <td>
                <textarea v-model="countermeasureRemarks" placeholder="备注信息" :disabled="isDisabled"></textarea>
              </td>
            </tr>
          </table>
        </div>
        <div class="vodal-btn-box auto tc" v-if="submitShow">
          <button type="button" class="blue-button xl-btn-css" @click="writeSubmit">提交</button>
          <button type="button" class="blue-button xl-btn-css" @click="writeShow=false">取消</button>
        </div>
      </div>
    </vodal>
    <vodal :show="showUpload" animation="zoom" :width="400" :height="230" @hide="showUpload=false">
      <div class="vodal-main upload">
        <h4>上传合同审查报告</h4>
        <div class="con">
          <p>文件名称：
            <input type="text" class="input-css" v-model="reportName">
          </p>
          <p>选择文件：
            <button class="blue-button xl-btn-css" id="reportUploadBtn">选择文件</button>
          </p>
        </div>
        <div class="vodal-btn-box auto tc">
          <button type="button" class="blue-button" @click="onSubmitReport">确认</button>
          <button type="button" class="white-button" @click="showUpload=false">取消</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'
import Step from '../components/Step'
import FileNum from '../components/FileNum'
import FileBrowser from '../components/FileBrowser'
import FileUploadManager from '../components/FileUploaderManager'
export default {
  components: {
    swiper,
    swiperSlide,
    Step,
    FileNum,
    FileBrowser
  },
  data() {
    return {
      id: '',
      pendingContracts: [],
      contractReports: [],
      formalCon4tract: '',
      formalNum: 0,
      showPendingContract: false,
      showContractReport: false,
      stepNum: 1,
      stepData: [{
        name: '查看资质审查报告'
      }, {
        name: '审查合同'
      }, {
        name: '绘制流程图'
      }, {
        name: '绘制完成'
      }],
      reviewFormNum: 0,
      writeShow: false,
      showUpload: false,
      seeShow: false,
      reportName: '',
      reportUrl: '',
      uploader: null,
      status: 0,
      isSubmitting: false,
      formalContract: false,
      uniformity: '',
      uniformityRemarks: '',
      legitimacyRemarks: '',
      legitimacy: '',
      type: '',
      typeRemarks: '',
      mainTerms: [],
      mainRemarks: '',
      specificRemarks: '',
      specificTerms: [],
      countermeasure: '',
      countermeasureRemarks: '',
      index: '',
      list: [],
      submitShow: true,
      isDisabled: false,
      jurisdicType: true
    }
  },
  watch: {
    writeShow(newVal, oldVal) {
      if (!newVal) {
        this.empty()
        this.submitShow = true
        this.isDisabled = false
      }
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.initUploader()
    this.getData()
  },
  methods: {
    onNextStep() {
      if (this.status >= 4) {
        this.$router.push('/tm-transaction-draw?id=' + this.id)
      } else {
        if (this.formalNum !== 0) {
          if (!this.isSubmitting) {
            this.isSubmitting = true
            this.$http.post('/transactionMonitorSer/examineContract', {
              id: this.id
            }).then(data => {
              this.isSubmitting = false
              if (data.data.httpCode === 200) {
                this.$router.push('/tm-transaction-draw?id=' + this.id)
              } else {
                this.$toasted.show(data.data.msg)
              }
            }).catch(err => {
              this.isSubmitting = false
              console.log(err)
              this.$toasted.show('网络错误')
            })
          }
        } else {
          this.$toasted.show('请等待客户上传正式合同')
        }
      }
    },
    onSubmitReport() {
      if (!this.reportName) {
        this.$toasted.show('请输入文件名称')
        return
      }
      if (!this.reportUrl) {
        this.$toasted.show('请选择要上传的报告')
        return
      }
      this.showUpload = false
      this.$http.post('/transactionMonitorSer/monitor/contractReport', {
        id: this.id,
        address: this.reportUrl,
        name: this.reportName
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('上传报告成功')
          let o = {
            address: this.reportUrl,
            name: this.reportName
          }
          this.contractReports.push(o)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onCheckContractReport() {
      if (this.contractReports.length) {
        this.showContractReport = true
        this.$nextTick(() => {
          this.$refs.reportBrowser.update()
        })
      } else {
        this.$toasted.show('暂无合同审查报告')
      }
    },
    onCheckPending() {
      if (this.pendingContracts.length === 0) {
        this.$toasted.show('暂无待审查合同')
        return
      }
      this.showPendingContract = true
      this.$nextTick(() => {
        this.$refs.fileBrowser.update()
      })
    },
    getData() {
      this.$http.post('/transactionMonitorSer/sys/read/detail', {
        id: this.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.status = data.data.data.status
          this.list = data.data.data.contractReviews
          this.reviewFormNum = data.data.data.contractReviews.length
          if (this.status > 3) {
            this.jurisdicType = false
          }
          if (data.data.data.pendingContracts) {
            this.pendingContracts = data.data.data.pendingContracts
          }
          if (data.data.data.contractReports) {
            this.contractReports = data.data.data.contractReports
          }
          if (data.data.data.contracts) {
            this.formalContract = data.data.data.contracts.address
            this.formalNum = 1
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    writeSubmit() {
      if (!this.uniformity) {
        this.$toasted.show('请选择待审查项目与监控申请单一致性')
        return
      }
      if (!this.legitimacy) {
        this.$toasted.show('请选择合同合法性')
        return
      }
      if (!this.type) {
        this.$toasted.show('请填写主要法律法规、条款')
        return
      }
      if (this.mainTerms.length === 0) {
        this.$toasted.show('请选择主要条款')
        return
      }
      if (this.specificTerms.length === 0) {
        this.$toasted.show('请选择具体条款')
        return
      }
      if (!this.countermeasure) {
        this.$toasted.show('资质审查中问题的对策')
        return
      }
      this.$http.post('/transactionMonitorSer/monitor/contractReview', {
        serviceId: this.$route.query.id,
        uniformity: this.uniformity,
        uRemark: this.uniformityRemarks,
        validity: this.legitimacy,
        vRemark: this.legitimacyRemarks,
        lawsAndRegulations: this.type,
        lRemark: this.typeRemarks,
        mainTerms: this.mainTerms,
        mRemark: this.mainRemarks,
        specificTerms: this.specificTerms,
        sRemark: this.specificRemarks,
        hasMethod: this.countermeasure,
        hRemark: this.countermeasureRemarks
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('合同审查表上传成功')
          this.getData()
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
      this.writeShow = false
    },
    write() {
      this.writeShow = true
    },
    show(i) {
      this.writeShow = true
      this.submitShow = false
      this.isDisabled = true
      this.uniformity = this.list[i].uniformity
      this.uniformityRemarks = this.list[i].uRemark
      this.legitimacy = this.list[i].validity
      this.legitimacyRemarks = this.list[i].vRemark
      this.type = this.list[i].lawsAndRegulations
      this.typeRemarks = this.list[i].lRemark
      this.mainTerms = this.list[i].mainTerms.split(',')
      this.mainRemarks = this.list[i].mRemark
      this.specificTerms = this.list[i].specificTerms.split(',')
      this.specificRemarks = this.list[i].sRemark
      this.countermeasure = this.list[i].hasMethod
      this.countermeasureRemarks = this.list[i].hRemark
      this.index = i + 1
    },
    showUploadVodal() {
      if (this.formalNum === 0) {
        this.reportName = ''
        this.reportUrl = ''
        this.showUpload = true
      } else {
        this.$toasted.show('已有正式合同，不能再上传审查报告')
      }
    },
    see() {
      this.seeShow = true
    },
    initUploader() {
      this.uploader = new FileUploadManager('contract-report', 'reportUploadBtn', (data) => {
        this.$toasted.show('上传成功')
        this.reportUrl = data
      }, (msg) => {
        this.$toasted.show(msg)
      }, true)
    },
    empty() {
      this.uniformity = ''
      this.uniformityRemarks = ''
      this.legitimacy = ''
      this.legitimacyRemarks = ''
      this.type = ''
      this.typeRemarks = ''
      this.mainTerms = []
      this.mainRemarks = ''
      this.specificTerms = []
      this.specificRemarks = ''
      this.countermeasure = ''
      this.countermeasureRemarks = ''
      this.index = ''
    },
    stepRouter(i, name) {
      if (i === 0 && this.status >= 2) {
        this.$router.push('/tm-transaction-aptitude?id=' + this.$route.query.id)
      }
      if (i === 1 && this.status >= 3) {
        this.$router.push('/tm-transaction-contract?id=' + this.$route.query.id)
      }
      if (i === 2 && this.status > 4) {
        this.$toasted.show('请查看绘制完成图')
      }
      if (i === 2 && this.status === 4) {
        this.$router.push('/tm-transaction-draw?id=' + this.$route.query.id)
      }
      if (i === 3 && this.status >= 5) {
        this.$router.push('/tm-transaction-draw-finish?id=' + this.$route.query.id)
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.content {
  padding: 30px 0;
  margin-top: 20px;
}


.content .next-step {
  margin-top: 40px;
}

.content table button {
  margin-left: 20px;
}

.content table a {
  margin-left: 20px;
}

table,
td,
th {
  border: 1px solid #ddd;
  background-color: #fff;
  color: #333;
}

table {
  border-collapse: collapse;
}

table td.choose-box {
  text-align: left;
  padding-left: 35px;
}

table td.choose-box li {
  margin: 2px;
  display: inline-block;
  width: 78px;
  padding: 0;
}

table td .btn-box.seeType {
  vertical-align: bottom;
}

table td .btn-box button {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
}

.upload p {
  margin-bottom: 20px;
}

.upload input[type="text"] {
  height: 35px;
  line-height: 35px;
  width: 265px;
}

.slider {
  width: 85%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 350px;
  margin: 28px auto;
}

.lt {
  float: left;
}

textarea {
  padding: 6px;
}

.tex-css {
  width: 310px;
  height: 70px;
}

</style>
